import React from 'react';
import { SafeAreaView, View, Text, StyleSheet, Button, Alert, StatusBar } from 'react-native';
import SQLite from 'react-native-sqlite-storage';

SQLite.enablePromise(true);
const SafeAreaViewExample = () => {
    const [isPaddingEnabled, setPaddingEnabled] = React.useState(true);
    return (
        <SafeAreaView style={styles.safeArea}>
            <View style={[styles.container, { paddingTop: isPaddingEnabled ? StatusBar.currentHeight : 0 }]}>
                <Text style={styles.title}>SafeAreaView 示例</Text>
                <Text style={styles.text}>
                    这个区域会自动适配刘海屏、圆角等安全区域。
                </Text>
                <Button
                    title={isPaddingEnabled ? '开启StatusBar安全区域' : '关闭StatusBar安全区域'}
                    onPress={() => { setPaddingEnabled(!isPaddingEnabled) }}
                />
            </View>
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    safeArea: {
        flex: 1,
        backgroundColor: '#f2f2f2',
    },
    container: {
        backgroundColor: 'orange',
    },
    title: {
        fontSize: 22,
        fontWeight: 'bold',
        marginBottom: 16,
    },
    text: {
        fontSize: 16,
        marginBottom: 24,
        color: '#333',
    },
});

export default SafeAreaViewExample;